<template>
	<view class="box" :style="{'padding-top':systemHeight+29+'px'}">
		<view class="topp">
			<image class="back" src="/static/img/back_map.png" @click="back"></image>
			<view class="right"></view>
		</view>
		<view class="bottom">
			<image class="bottom_bg" src="/static/img/bg_5.png"></image>
			
			<view v-if="orderStatus != '3'">
				<view class="bottom_top_title">Go to the boarding point</view>
				<view class="bottom_top_welcome">3km away from you</view>
				<view class="lie">
					<view class="lie_left">Expected duration <text>: 00:08:00</text></view>
					<view class="lie_right">
						<view class="lie_right_top">Estimate</view>
						<view class="lie_right_top_tilte">MK<text>8000</text></view>
					</view>
				</view>
			</view>
			
			<view class="finall_box" v-if="orderStatus == '3'">
				<image class="finall_box_img" src="/static/img/all_right.png"></image>
				<view class="finall_box_title">Order completed</view>
				<view class="lie" style="width: 100%;">
					<view class="lie_left"><text>9 km, 10-minute trip</text></view>
					<view class="lie_right">
						<view class="lie_right_top">Estimate</view>
						<view class="lie_right_top_tilte">MK<text>8000</text></view>
					</view>
				</view>
			</view>
			
			
			<view class="driver">
				<image class="avatar" src="/static/img/women.png"></image>
				<view class="avatar_name">Name</view>
				<image class="driver_phone" src="/static/img/phone.png"></image>
			</view>
			<view class="bottom_box">
				<view class="bottom_box_row">
					<view class="cirle"></view>
					<view>Starting point positioning name</view>
				</view>
				<view class="line"></view>
				<view class="bottom_box_row">
					<view class="cirle" style="background: #33BA78;"></view>
					<view>Starting point positioning name</view>
				</view>
			</view>
			<view class="button">
				<view class="button_left" v-if="orderStatus == '0'">Cancel order</view>
				
				<!-- 这有一个reach按钮 -->
				<view class="button_right" @click="orderStatus = '1'" v-if="orderStatus == '0'">set out</view>
				
				<!-- 这有一个Arrive at the destination按钮 -->
				<view class="button_but" v-if="orderStatus == '1'" @click="orderStatus = '2'">Go to the destination</view>
				<view class="button_but" v-if="orderStatus == '2'" @click="orderStatus = '3'">Arrive at the destination</view>
				<view class="button_but" v-if="orderStatus == '3'" @click="goOrderDetail()">View details</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemHeight: null,
				orderStatus:'0'
			}
		},
		created() {
			this.systemHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			goOrderDetail(){
				this.utils.To('/pages/pay/orderDetail')
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.boxx {
		width: 100%;
		height: 100vh;
	}

	.topp {
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx auto;
	}

	.back {
		width: 60rpx;
		height: 60rpx;
	}

	.right {
		width: 60rpx;
	}

	.bottom {
		padding: 30rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 890rpx;
		border-radius: 60rpx 60rpx 10rpx 10rpx;
	}

	.bottom_bg {
		z-index: -1;
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		height: 331rpx;
		top: 0;
		left: 0;
	}

	.bottom_top_title {
		box-sizing: border-box;
		font-family: Mont;
		font-weight: bold;
		font-size: 26rpx;
		margin-bottom: 24rpx;
	}

	.bottom_top_welcome {
		box-sizing: border-box;
		font-family: Mont;
		font-weight: 500;
		font-size: 24rpx;
		color: #787878;
		margin-bottom: 33rpx;
	}

	.lie {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.lie_left {
		font-family: Mont;
		font-weight: 500;
		font-size: 20rpx;
		color: #747474;
	}

	.lie_left text {
		font-size: 24rpx;
		color: #181A19
	}

	.lie_right {
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	.lie_right_top {
		font-family: Mont;
		font-weight: 500;
		font-size: 20rpx;
		color: #787878;
	}

	.lie_right_top_tilte {
		font-family: Mont;
		font-weight: bold;
		font-size: 24rpx;
	}

	.lie_right_top_tilte text {
		font-size: 32rpx
	}
	.finall_box{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.finall_box_img{
		width: 126rpx;
		height: 126rpx;
	}
	.finall_box_title{
		font-family: Mont;
		font-weight: bold;
		font-size: 26rpx;
		margin: 20rpx 0rpx 35rpx ;
	}
	
	.driver {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		position: relative;
		padding: 38rpx 27rpx;
		background: #F4F4F4;
		border-radius: 30rpx;
		margin-top: 30rpx;
		margin-bottom: 23rpx;
	}

	.avatar {
		width: 96rpx;
		height: 96rpx;
		margin-right: 30rpx;
	}

	.avatar_name {
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
	}

	.driver_phone {
		position: absolute;
		top: 50rpx;
		right: 40rpx;
		width: 66rpx;
		height: 66rpx;
	}

	.bottom_box {
		padding: 35rpx;
		box-sizing: border-box;
		background: #F4F4F4;
		border-radius: 30rpx;
	}
	.bottom_box_row{
		display: flex;
		align-items: center;
		font-family: Mont;
		font-weight: 500;
		font-size: 28rpx;
	}
	.cirle{
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		margin-right: 36rpx;
		background: #FFAA44;
		border-radius: 9rpx;
	}
	.line{
		width: 1rpx;
		height: 53rpx;
		border-right: 1px dashed #7A7A7A;
		margin: 2rpx 6rpx;
	}
	.button{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 53rpx auto 0rpx;
	}
	.button_left{
		width: 330rpx;
		height: 92rpx;
		border-radius: 46rpx;
		border: 1px solid #34BA78;
		text-align: center;
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
		color: #34BA78;
		line-height: 92rpx;
	}
	.button_right{
		text-align: center;
		width: 330rpx;
		height: 92rpx;
		background: #34BA78;
		border-radius: 46rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 92rpx;
	}
	.button_but{
		width: 100%;
		height: 92rpx;
		background: #34BA78;
		border-radius: 46rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
	}
</style>